import React, {Component} from 'react';
import cssModule from './ChatItem.module.less'
import testimg from '../../assets/img/001.jpg'

import {withRouter} from 'react-router-dom'  // 作用：非路由组件取path值

import {Modal, Button, WhiteSpace, WingBlank, Toast} from 'antd-mobile';


let timers = null;  // 防抖
let touchType = 'shortTouch';   // 触摸类型是长按还是短按
let toUrl = ''; // 要跳转的url
let isTouchmoveing = false; // 是否move中（用于判断是否执行单点操作）

class ChatItem extends Component {
    onTouchStart = (e, url) => {
        toUrl = url;
        if (timers) return
        timers = setTimeout(() => {
            clearTimeout(timers)
            timers = null
            touchType = "longTouch"
            console.log('1321')
            Modal.alert('提示!', '是否删除该聊天?', [
                {text: '取消', onPress: () => console.log('cancel')},
                {
                    text: '确定',
                    onPress: () =>
                        new Promise((resolve) => {
                            Toast.info('onPress Promise', 1);
                            setTimeout(resolve, 1000);
                        }),
                },
            ])
        }, 1000)
    }

    onTouchMove(e) {
        isTouchmoveing = true
        if (!timers) return   // 节流操作

        //  长按下一移动就取消长按效果
        clearTimeout(timers)
        timers = null
    }

    onTouchEnd = (e) => {
        if (touchType === 'shortTouch' && !isTouchmoveing) {
            console.log('我是单点击')
            this.props.history.push(toUrl)
        } else if (touchType === 'longTouch') {
            console.log('我是长按')
        }


        e.preventDefault();
        clearTimeout(timers)
        // 复原初始化数据
        timers = null
        touchType = 'shortTouch'
        toUrl = ""
        isTouchmoveing = false
    }

    render() {
        return (
            <div className={`${cssModule.Item} noSel`}
                 onTouchStart={(e) => this.onTouchStart(e, '/ChatInterface')}
                 onTouchMove={(e) => this.onTouchMove(e)}
                 onTouchEnd={this.onTouchEnd}>
                <div className={cssModule.waterMask}/>
                <div className={cssModule.ItemLeft}>
                    <img className={cssModule.ItemLeftImg} src={testimg}/>
                    <div className='flex flex-col hei-inh just-spa-aro ml10'>
                        <p className='flex ali-cen'>吕非<span className='fo-gray fo-12 ml6'>杭州若以文化</span></p>
                        <p className='fo-gray'>[已读]你好你好！！！</p>
                    </div>
                </div>
                <div className={cssModule.ItemRight}>
                    <span className='fo-gray fo-12'>昨天</span>
                </div>
            </div>
        );
    }
}


export default withRouter(ChatItem);